<template>
  <a-form
    ref="imageDomainFormRef"
    :model="domainState"
    :rules="configRules"
    :labelCol="{ style: { width: '110px' } }"
    :colon="false"
    labelAlign="right"
  >
    <a-form-item label="视频封面域名" name="movie_cover">
      <a-input v-model:value.trim="domainState.movie_cover" class="w-[460px]" placeholder="请输入视频封面域名" />
    </a-form-item>
    <a-form-item label="图集封面域名" name="atlas_cover">
      <a-input v-model:value.trim="domainState.atlas_cover" class="w-[460px]" placeholder="请输入图集封面域名" />
    </a-form-item>
    <a-form-item label="文章封面域名" name="article_cover">
      <a-input v-model:value.trim="domainState.article_cover" class="w-[460px]" placeholder="请输入文章封面域名" />
    </a-form-item>
    <a-form-item label="演员封面域名" name="person_cover">
      <a-input v-model:value.trim="domainState.person_cover" class="w-[460px]" placeholder="请输入演员封面域名" />
    </a-form-item>
    <a-form-item label="图集内容域名" name="atlas_content_cover">
      <a-input
        v-model:value.trim="domainState.atlas_content_cover"
        class="w-[460px]"
        placeholder="请输入图集内容域名"
      />
    </a-form-item>
    <a-form-item label="广告图片域名" name="adv_cover">
      <a-input v-model:value.trim="domainState.adv_cover" class="w-[460px]" placeholder="请输入广告图片域名" />
    </a-form-item>
  </a-form>
  <div class="page-btn">
    <a-button type="primary" :loading="loading" @click="saveDomainPage">保存当前页面</a-button>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { configRules } from '../state'
import apis from '@/apis'
import { message } from 'ant-design-vue'
import { storage } from '@/utils/storage'
import useStore from '@/stores/index'
const { system } = useStore()
const {
  system: { get_img_domain, set_img_domain }
} = apis
const imageDomainFormRef = ref()
const loading = ref(false)
interface DomainState {
  movie_cover: string
  atlas_cover: string
  article_cover: string
  person_cover: string
  atlas_content_cover: string
  adv_cover: string
}
const domainState = reactive<DomainState>({
  movie_cover: '',
  atlas_cover: '',
  article_cover: '',
  person_cover: '',
  atlas_content_cover: '',
  adv_cover: ''
})
const getImgDomaineSet = () => {
  get_img_domain().then((res: any) => {
    console.log(res, '获取图片域名设置')
    Object.assign(domainState, res)
    storage.set('image_domain', domainState)
    system.setImageDomain(domainState)
  })
}
const saveDomainPage = () => {
  imageDomainFormRef.value
    .validate()
    .then(() => {
      loading.value = true
      set_img_domain(domainState).then((res: any) => {
        message.success('图片域名配置保存成功')
        loading.value = false
        storage.set('image_domain', domainState)
        system.setImageDomain(domainState)
      })
    })
    .catch(() => {
      loading.value = false
    })
}
defineExpose({ getImgDomaineSet })
</script>

<style lang="less" scoped>
.page-btn {
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
</style>
